<template>
  <div>
    <div width="100%" height="20%" border="1px">
    </div>
    <el-row>
      <p style="text-align: left">
        朝代：
      <el-button @click="refulsh('初唐')">初唐</el-button>
      <el-button type="primary" @click="refulsh('盛唐')">盛唐</el-button>
      <el-button type="success" @click="refulsh('中唐')">中唐</el-button>
      <el-button type="info" @click="refulsh('晚唐')">晚唐</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="getRow()">重置</el-button>
      </p>
    </el-row>
    <div v-for="(item,i) in newData">
      <el-row class="demo-avatar demo-basic" >
        <div v-for="(shiren,j) in item" v-bind:class="imgUrl(shiren.profile)">

          <el-col :span="6">
            <el-link type="success"
                     :underline="false"
                     @click="addLink(shiren)">
            <img width="300px" height="400px" border="1px" :src="imgUrl(shiren.profile)"/>
            <p style="white-space: pre-wrap;">{{shiren.name}}</p>
            </el-link>
          </el-col>

        </div>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name:"ShiRen",
  data() {
    return {
      dialogVisible: false,
      row: {},
      url:'',
      data:[],
      newData:[],
      refulshData:[],
      tableData: [
        {"id":1,"name":"李白","profile":"/images/01.jpg","dynasty":"盛唐","credit":120,"master":"《静夜思》、《蜀道难》、《将进酒》《梦游天姥吟留别》、《行路难》","title":"诗仙","info":"李白，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。”"},
        {"id":2,"name":"杜甫","profile":"/images/02.jpg","dynasty":"盛唐","credit":90,"master":"《登高》《春望》《北征》《三吏》《三别》","title":"诗圣","info":"杜甫，字子美，自号少陵野老，唐代著名现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。"},
        {"id":3,"name":"李贺","profile":"/images/03.jpg","dynasty":"中唐","credit":90,"master":"《高轩过》《梦天》《雁门太守行》《致酒行》《李凭箜篌引》","title":"诗鬼","info":"李贺（790～816） [1]  ，字长吉。河南府福昌县昌谷乡（今河南省宜阳县）人， 祖籍陇西郡。  唐朝中期浪漫主义诗人"},
        {"id":4,"name":"贺知章","profile":"/images/04.jpg","dynasty":"盛唐","credit":100,"master":"《回乡偶书》(其一)、《咏柳》 《送人之军》 《唐禅社首乐章·太和》","title":"四明狂客","info":"贺知章，字季真，晚年自号“四明狂客”、“秘书外监”，越州永兴（今浙江杭州萧山区）人。唐代诗人、书法家。"},
        {"id":5,"name":"王昌龄","profile":"/images/05.jpg","dynasty":"盛唐","credit":110,"master":"《出塞》《从军行七首》《芙蓉楼送辛渐》《长信宫词》","title":"七绝圣手","info":"王昌龄，字少伯，唐朝时期大臣，著名边塞诗人。"},
        {"id":6,"name":"刘禹锡","profile":"/images/06.jpeg","dynasty":"中唐","credit":70,"master":"《乌衣巷》、《秋词》、《竹枝》(六)、《浪淘沙》(一)","title":"诗豪","info":"刘禹锡，字梦得，籍贯河南洛阳，生于河南郑州荥阳，自述“家本荥上，籍占洛阳” ，其先祖为中山靖王刘胜 [1-2]  （一说是匈奴后裔） [3]  。唐朝时期大臣、文学家、哲学家，有“诗豪”之称。"},
        {"id":7,"name":"王勃","profile":"/images/07.jpeg","dynasty":"初唐","credit":90,"master":"《送杜少府之任蜀州》《滕王阁》","title":"初唐四杰","info":"王勃，字子安，绛州龙门县（今山西省河津市）人。唐朝文学家，文中子王通之孙，与杨炯、卢照邻、骆宾王共称“初唐四杰”。"},
        {"id":8,"name":"杨炯","profile":"/images/08.jpg","dynasty":"初唐","credit":95,"master":"《从军行》、《出塞》、《战城南》、《紫骝马》","title":"初唐四杰","info":"杨炯，字令明，华州华阴（今陕西华阴市）人。唐朝大臣、文学家，常山郡公杨初曾孙，与王勃、卢照邻、骆宾王并称“初唐四杰”。"},
        {"id":9,"name":"骆宾王","profile":"/images/09.jpg","dynasty":"初唐","credit":105,"master":"咏鹅、咏蝉 / 在狱咏蝉、于易水送人 / 于易水送别","title":"初唐四杰","info":"骆宾王  ，字观光，婺州义乌（今属浙江）人。唐代大臣、诗人、儒客大家，与王勃、杨炯、卢照邻合称“初唐四杰”。"},
        {"id":10,"name":"卢照邻","profile":"/images/10.jpg","dynasty":"初唐","credit":102,"master":"《长安古意》、《释疾文并序》、《咏史》","title":"初唐四杰","info":"卢照邻，字升之，号幽忧子，幽州范阳（今河北涿州）人，唐朝诗人。"},
        {"id":11,"name":"陈子昂","profile":"/images/11.jpg","dynasty":"初唐","credit":101,"master":"《登幽州台歌》、《登泽州城北楼宴》、《感遇》","title":"初唐四杰","info":"陈子昂 ，字伯玉，梓州射洪（今属四川）人。唐代文学家、诗人，初唐诗文革新人物之一。因曾任右拾遗，后世称陈拾遗。"},
        {"id":12,"name":"王维","profile":"/images/12.jpg","dynasty":"盛唐","credit":101,"master":"《终南别业》《使至塞上》《送元二使安西》《九月九日忆山东兄弟》","title":"初唐四杰","info":"王维，字摩诘，号摩诘居士。河东蒲州（今山西永济）人，祖籍山西祁县。唐朝诗人、画家。"},
        {"id":13,"name":"李商隐","profile":"/images/13.jpg","dynasty":"晚唐","credit":101,"master":"无题、楚宫、马嵬二首、残花","title":"诗魂","info":"李商隐，字义山，号玉谿生，怀州河内（今河南省沁阳市）人 [1]  。晚唐著名诗人，和杜牧合称“小李杜”。"}
      ]
    }
  },
  created() {
    this.getRow();

  },
  methods: {
    getRow(){
      const _this = this;
      let newData = [];
      let data = [];
      _this.tableData.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引，从0开始
            data.push(item);
            if((index+1)%4==0){
              newData.push(data);
              data = [];
            }
      })
      newData.push(data);
      _this.newData = newData;
    },
    refulsh(dynasty){
      const _this = this;
      let newData = [];
      let data = [];
      let refulshData = [];
      _this.tableData.forEach(function(item, index) {
        //item 就是当日按循环到的对象
        //index是循环的索引，从0开始
        if(item.dynasty===dynasty){
          refulshData.push(item);
        }
      })

      refulshData.forEach(function(item, index) {
        //item 就是当日按循环到的对象
        //index是循环的索引，从0开始
        data.push(item);
        if((index+1)%4==0){
          newData.push(data);
          data = [];
        }
      })
      newData.push(data);
      data = [];
      _this.newData = newData;
      console.log(_this.newData);

    },
    imgUrl(url){
      return require("../../assets"+url);
    },
    addLink(shiren){
      console.log(shiren);
      let shiren1 = shiren;
      this.$router.push({path:'/shiRenXiangQing',query:{shiren1}});
    }

  }
}
</script>
